<template>
  <div>
    <div class="title">
      <a href="#">{{ title }}</a>
      <hr v-show="show_hr"/>
    </div>
    <ul class="pic-list">
      <li class="pic-list-item" v-for="item in pics" :key='item.id' :id="item.id">
        <img class="pic-list-item-pic" :src="item.img" alt="图片" width="100%" height="100%">
        <div class="pic-list-item-row" v-if="item.name">
          <a class="pic-list-item-title" :href="'#' + item.id">{{ item.name + ":  " +  item.des }}</a>
        </div>
        <div class="pic-list-item-row" v-if="item.unit">
          <a class="pic-list-item-price" :href="'#' + item.id">{{ item.price + "/" + item.unit}}</a>
        </div>
      </li>
    </ul>
    <div class='wxqr'>
      <img :src="wxqr" alt="图片" v-show="show_wxqr" width="100px" height="100px">
    </div>
</div>
</template>

<script>
// https://cn.vuejs.org/v2/api/#Vue-extend - error
// let id = this.$Qs.parse(location.search.substring(1)).id

export default {
  name: 'FPic',
  data () {
    return {
      show_hr: false,
      show_wxqr: false,
      title: '',
      wxqr: '',
      pics: [],
      // https://blog.csdn.net/qq_31393401/article/details/82699847
      id: this.$Qs.parse(location.search.substring(1)).id,
      token: this.$Qs.parse(location.search.substring(2)).token
    }
  },
  created () {
    // this.$Message('图片列表页面呀！')
    this.getPicList()
  },
  methods: {
    getPicList () {
      // vue-jsonp
      // this.$jsonpfecth('/findAdvertisement', { id: this.id },
      //   (json) => {
      //     console.log(json)
      //   })
      // axios
      this.$fetch('/adver/findAdvertisement', { id: this.id, token: this.token })
        .then((response) => {
          this.title = response.title
          if (this.title) {
            this.show_hr = true
          }
          this.wxqr = response.wxqr
          if (this.wxqr) {
            this.show_wxqr = true
          }
          this.pics = response.commoditys
          if (this.pics === undefined || this.pics === null || this.pics.length < 1) {
            this.$Message('这是一个空广告哟！')
          }
          // 测试数据
          // this.title = '桃子富含多种维生素、矿物质和果酸，其铁含量居水果之冠。桃子有养阴生精、补气润肺的鲜果，还能补钾哟😊'
          // for (var i = 0; i < 10; ++i) {
          //   // https://cn.vuejs.org/v2/guide/list.html#数组更新检测
          //   this.pics.unshift({ id: i, name: '苹果', img: 'http://nec.netease.com/img/s/1.jpg', des: '盐源苹果', price: '100万/一箱' })
          // }
        }, (err) => {
          console.log(err)
          // 找不到，跳转到火星页面
          this.$router.push({ name: 'Empt' })
          // 测试数据
          // this.title = '桃子富含多种维生素、矿物质和果酸，其铁含量居水果之冠。桃子有养阴生精、补气润肺的鲜果，还能补钾哟😊'
          // this.wxqr = 'http://nec.netease.com/img/s/1.jpg'
          // for (var i = 0; i < 10; ++i) {
          //   // https://cn.vuejs.org/v2/guide/list.html#数组更新检测
          //   this.pics.unshift({ id: i, name: '苹果', img: 'http://nec.netease.com/img/s/1.jpg', des: '盐源苹果', price: '100万/一箱' })
          // }
        })
    }
  }
}
</script>

<style scoped>
  /* scoped的用处就是，让vue的样式只在本组件中生效 */
  /*引入css 样式文件*/
  @import './fpic.css';
</style>
